<template>
  <div>
    <div class="vip_top">
      <div>
        <p>会员名称</p>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input2"
          @blur="blur"
        ></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
    </div>
    <!-- 列表 -->
    <div class="list">
      <el-table :data="tableData" border style="width: 100%;">
        <el-table-column
          fixed
          prop="name"
          label="用户名称"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="province"
          label="等级/标签组"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="datetime"
          label="注册时间"
          width="220"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="积分余额"
          width="120"
        ></el-table-column>
        <el-table-column prop="city" label="成交" width="270"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 4, 3]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="20"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { zqhviplist } from '../../api/index'
export default {
  created() {
    this.list()
  },
  data() {
    return {
      input1: '',
      input2: '',
      tableData: [], //数据
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
      page: 1, //当前的页数
      size: 5, //每页的数量
      tag: 0,//总条数
    }
  },
  methods: {
    // 获取数据
    list() {
      zqhviplist({}).then((res) => {
        console.log(res)
        if (res.code == 200) {
          let a = res.data
          this.tableData = a.slice((this.page-1)*this.size,this.page*this.size)
        }
      })
    },
    // 失去焦点
    blur(){
      this.list()
    },
    // 搜索
    search(){
      if(this.input2!=''){
        let a=this.tableData.filter(item=>{
          return item.name==this.input2
        })
        this.tableData=a
      }else{
        this.input2=''
      }

    },
    // 查看详情
    handleClick(row) {
        console.log(row);
        this.$router.push({path:'/vipitem',query: row})
      },
    //   每页数据
    handleSizeChange(val) {
      this.size = val
      this.page=1
      this.list()
    },
    // 第几页数据
    handleCurrentChange(val) {
      this.page=val
      this.list()
    },
  },
}
</script>

<style lang="scss" scoped>
.vip_top {
  width: 450px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 30px 0 0 50px;
  div {
    display: flex;
    align-items: center;
    p {
      width: 90px;
    }
  }
}
.list {
  width: 1100px;
  margin: 50px auto;
}
.pagination {
  text-align: right;
  margin-right: 70px;
}
</style>
